<template>
  <div class="index_container flex-b-r">
    <div class="Main_body">
      <!-- 头部导航栏 -->
      <div :class="[scrollType == '1' ? 'Navigation_con' : 'Navigation_con1']">
        <Navigation></Navigation>
      </div>
      <!-- 搜索框区域 -->
      <div
        v-if="searchType == 1"
        :class="[scrollType == '1' ? 'search_box' : 'search_box1']"
      >
        <div class="search"><search></search></div>
      </div>
      <!-- 主体内容 -->
      <div class="box">
        <router-view @passFunction="passFunction"></router-view>
      </div>
      <!-- 底部内容 -->
      <div class="bottomArea">
        <bottomModule></bottomModule>
      </div>
    </div>
    <!-- 右侧功能 -->
    <div class="right_btn">
      <div><i class="el-icon-s-comment"></i></div>
      <p>反馈</p>
      <div><i class="el-icon-s-comment"></i></div>
      <p>在线客服</p>
    </div>
  </div>
</template>

<script>
// 头部导航栏 组件
import Navigation from "../components/Navigation.vue";
// 底部 组件
import bottomModule from "../components/bottomModule.vue";
// 搜索框 组件
import search from "../components/search.vue";

export default {
  // 组件名称
  name: "Index",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    // Map,

    bottomModule,
    search,
    Navigation,
  },
  // 组件状态值
  data() {
    return {
      scroll: "",
      scrollType: "1",
      searchType: "",
    };
  },
  watch: {
    scroll: {
      handler(newss, old) {
        // console.log(newss, old);
        if (newss > 200) {
          this.scrollType = "2";
        } else {
          this.scrollType = "1";
        }
      },
      immediate: false,
    },
  },
  // 组件初始化
  created() {
    var currentURL = window.location.href;
    console.log(currentURL);
  },
  // 组件实例挂载完毕
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  // 组件方法
  methods: {
    // 获取页面卷动高度
    handleScroll() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
    },
    // 接收首页传的数据用于判断搜索框是否隐藏
    passFunction(val) {
      this.searchType = val;
    },
  },
};
</script>

<style scoped lang="less">
// 右侧 客服
.right_btn {
  width: 80px;
  height: 170px;
  background-color: #ffffff;
  box-shadow: 0px 0px 3px 0px #b8b8b8;
  border-radius: 5px;
  position: fixed;
  right: 10px;
  top: 40%;
  font-size: 15px;
  font-weight: 600;
  z-index: 999;
  div {
    width: 100%;
    display: flex;
    margin-top: 24px;
    .el-icon-s-comment {
      margin: auto;
      font-size: 30px;
    }
  }
  p {
    width: 100%;
    text-align: center;
  }
}
// 搜索区
.search_box {
  min-width: 100%;
  min-height: 140px;
  background-color: #ffffff;
  display: flex;
  .search {
    width: 50%;
    min-width: 630px;
    margin: auto;
  }
}
.search_box1 {
  width: 100%;
  min-height: 140px;
  background-color: #ffffff;
  box-shadow: 0px 0px 3px 0px #b8b8b8;
  display: flex;
  z-index: 99;
  margin-top: 50px;
  position: fixed;
  top: 0; /* 距离页面顶部距离 */
  .search {
    width: 50%;
    margin: auto;
    min-width: 600px;
  }
}
// 最外层box
.index_container {
  min-width: 1230px;
  height: 100%;
  font-size: 24px;
  background-color: #ffffff;
}
// 第二层box
.Main_body {
  width: 100%;
  display: flex;
  flex-direction: column;
}
// 头部导航栏
.Navigation_con {
  width: 100%;
  min-height: 50px;
  background-color: #000000;
  z-index: 999;
  display: flex;
  // position: sticky;
  // top: 0; /* 距离页面顶部距离 */
}
.Navigation_con1 {
  width: 100%;
  height: 50px;
  // padding-top: 10px;
  background-color: #000000;
  z-index: 999;
  display: flex;
  position: fixed;
  top: 0; /* 距离页面顶部距离 */
}

// body主体
.box {
  margin: 0 auto;
  min-width: 1230px !important;
}
// 底部
.bottomArea {
  width: 100%;
  min-width: 1230px;
  min-height: 420px;
  // border: 1px solid gold;
  margin-top: 50px;
}
</style>
